<template>
    <div class="content">
        <div class="title-item">
            <span class="left">全国疫情</span>
            <span class="right">全国趋势</span>
        </div>
        <div class="content-item">
            <van-row>
                <van-col class="time-item" span="24">
                    更新时间：{{countryItem.imp_date}}
                </van-col>
                <van-col span="6">
                    <van-col class="num color-oranged" span="24">{{countryItem.confirm_num}}</van-col>
                    <van-col class="title-name" span="24">确诊人数</van-col>
                    <van-col class="add-item color-oranged" span="24">较昨日+{{countryItem.confirm_num_last}}</van-col>
                </van-col>
                <van-col span="6">
                    <van-col class="num color-orange" span="24">{{countryItem.suspect_num}}</van-col>
                    <van-col class="title-name" span="24">疑似人数</van-col>
                    <van-col class="add-item color-orange" span="24">较昨日+{{countryItem.suspect_num_last}}</van-col>
                </van-col>
                <van-col span="6">
                    <van-col class="num color-green" span="24">{{countryItem.cure_num}}</van-col>
                    <van-col class="title-name" span="24">治愈人数</van-col>
                    <van-col class="add-item color-green" span="24">较昨日+{{countryItem.cure_num_last}}</van-col>
                </van-col>
                <van-col span="6">
                    <van-col class="num color-gray" span="24">{{countryItem.death_num}}</van-col>
                    <van-col class="title-name" span="24">死亡人数</van-col>
                    <van-col class="add-item color-gray" span="24">较昨日+{{countryItem.death_num_last}}</van-col>
                </van-col>
            </van-row>
            <div class="divider" style="margin-bottom: 0"></div>
        </div>
        <div class="title-item">
            <span class="left">全省疫情</span>
            <span class="right">全省趋势</span>
        </div>
        <div class="content-item">
            <van-row>
                <van-col class="time-item" span="24">
                    更新时间：{{provinceItem.imp_date}}
                </van-col>
                <van-col span="8">
                    <van-col class="num color-oranged" span="24">{{provinceItem.confirm_num}}</van-col>
                    <van-col class="title-name" span="24">确诊人数</van-col>
                    <van-col class="add-item color-oranged" span="24">较昨日+{{provinceItem.confirm_num_last}}</van-col>
                </van-col>
                <van-col span="8">
                    <van-col class="num color-green" span="24">{{provinceItem.cure_num}}</van-col>
                    <van-col class="title-name" span="24">治愈人数</van-col>
                    <van-col class="add-item color-green" span="24">较昨日+{{provinceItem.cure_num_last}}</van-col>
                </van-col>
                <van-col span="8">
                    <van-col class="num color-gray" span="24">{{provinceItem.death_num}}</van-col>
                    <van-col class="title-name" span="24">死亡人数</van-col>
                    <van-col class="add-item color-gray" span="24">较昨日+{{provinceItem.death_num_last}}</van-col>
                </van-col>
            </van-row>
            <div class="divider" style="margin-bottom: 0"></div>
        </div>
        <div class="title-item">
            <span class="left">全市疫情</span>
            <span class="right">全市趋势</span>
        </div>
        <div class="content-item">
            <van-row>
                <van-col class="time-item" span="24">
                    更新时间：{{cityItem.imp_date}}
                </van-col>
                <van-col span="4">
                    <van-col class="num color-oranged" span="24">{{cityItem.confirm_num}}</van-col>
                    <van-col class="title-name" span="24">确诊人数</van-col>
                    <van-col class="add-item color-oranged" span="24">较昨日+{{cityItem.confirm_num_last}}</van-col>
                </van-col>
                <van-col span="4">
                    <van-col class="num color-orange" span="24">{{cityItem.suspect_num}}</van-col>
                    <van-col class="title-name" span="24">疑似人数</van-col>
                    <van-col class="add-item color-orange" span="24">较昨日+{{cityItem.suspect_num_last}}</van-col>
                </van-col>
                <van-col span="4">
                    <van-col class="num color-green" span="24">{{cityItem.cure_num}}</van-col>
                    <van-col class="title-name" span="24">治愈人数</van-col>
                    <van-col class="add-item color-green" span="24">较昨日+{{cityItem.cure_num_last}}</van-col>
                </van-col>
                <van-col span="4">
                    <van-col class="num color-blue" span="24">{{cityItem.exclude_num}}</van-col>
                    <van-col class="title-name" span="24">排除人数</van-col>
                    <van-col class="add-item color-blue" span="24">较昨日+{{cityItem.exclude_num_last}}</van-col>
                </van-col>
                <van-col span="4">
                    <van-col class="num color-gray" span="24">{{cityItem.death_num}}</van-col>
                    <van-col class="title-name" span="24">死亡人数</van-col>
                    <van-col class="add-item color-gray" span="24">较昨日+{{cityItem.death_num_last}}</van-col>
                </van-col>
            </van-row>
            <div class="echart" style="margin-top: 10px">
                <div id="portExit" class="chart-item"></div>
                <van-row class="btn-item">
                    <van-col span="8" offset="3">
                        <van-button type="default" to="/case-analysis">
                            <van-icon name="todo-list-o" />
                            病例分析
                        </van-button>
                    </van-col>
                    <van-col span="8"  offset="2">
                        <van-button type="default" to="/case-trend">
                            <van-icon name="bar-chart-o" />
                            病例趋势
                        </van-button>
                    </van-col>
<!--                    <van-col span="8">-->
<!--                        <van-button type="default" to="/collaborative-tracing">-->
<!--                            <van-icon name="aim" />-->
<!--                            协查追踪-->
<!--                        </van-button>-->
<!--                    </van-col>-->
                </van-row>
            </div>
            <div class="divider" style="margin-bottom: 0;"></div>
        </div>
        <div class="title-item">
            <span class="left">区县疫情</span>
            <span class="right"></span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="6">
                    区县市
                </van-col>
                <van-col span="6" class="color-oranged">
                    确诊
                </van-col>
                <van-col span="6" class="color-gray">
                    死亡
                </van-col>
                <van-col span="6" class="color-green">
                    治疗
                </van-col>
<!--                <van-col span="4" class="color-blue">-->
<!--                    趋势-->
<!--                </van-col>-->
            </van-row>
            <van-row class="table-item" v-for="item in quxianyiqingxinxi" :key="item.id">
                <van-col span="6">
                    {{item.county_name}}
                </van-col>
                <van-col span="6" class="color-oranged">
                    {{item.confirm_num}}
                </van-col>
                <van-col span="6" class="color-gray">
                    {{item.death_num}}
                </van-col>
                <van-col span="6" class="color-green">
                    {{item.cure_num}}
                </van-col>
<!--                <van-col span="4" class="color-blue">-->
<!--                    <van-icon name="chart-trending-o" />-->
<!--                </van-col>-->
            </van-row>
            <div class="divider" style="margin-bottom: 0"></div>
        </div>
        <div class="title-item">
            <span class="left">确诊人员</span>
            <span class="right" @click="more">查看全部 ></span>
        </div>
        <div class="diagnosis">
            <van-row>
                <van-col class="diagnosis-item" span="12" v-for="item in definiteInfoList.slice(0,4)" :key="item.serial_num">
                    <div class="diagnosis-boder">
                        <van-row>
                            <van-col class="pd" span="24">
                                姓名：<span>{{item.name}}</span>
                            </van-col>
                            <van-col class="pd" span="12">
                                性别：<span>{{item.sex}}</span>
                            </van-col>
                            <van-col class="pd" span="12">
                                年龄：<span>{{item.age}}</span>
                            </van-col>
                            <van-col class="pd" span="24">
                                职业：<span>{{item.job_title}}</span>
                            </van-col>
                            <van-col class="pd" span="24">
                                <van-col span="6" > 就诊 </van-col >
                                <van-col span="2">|</van-col>
                                <van-col span="11"   @click="toTracks(item.link_addr)"> 轨迹 </van-col >
                            </van-col>
                        </van-row>
                    </div>
                </van-col>
            </van-row>
            <div class="divider" style="margin-bottom: 0"></div>
        </div>
        <div class="title-item">
            <span class="left">确诊病例趋势图</span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="24">
                    <div id="blqst" class="chart-item-2" style="height:300px;"></div>
                </van-col>
            </van-row>
            <div class="divider" style="margin-bottom: 0"></div>
        </div>
        <div class="title-item">
            <span class="left">疑似病例趋势图</span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="24">
                    <div id="ysbl" class="chart-item-2" style="height:300px;"></div>
                </van-col>
            </van-row>
            <div class="divider" style="margin-bottom: 0"></div>
        </div>
        <div class="title-item">
            <span class="left">治愈病例趋势图</span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="24">
                    <div id="zybl" class="chart-item-2" style="height:300px;"></div>
                </van-col>
            </van-row>
            <div class="divider" style="margin-bottom: 0"></div>
        </div>
        <div class="title-item">
            <span class="left">排除病例趋势图</span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="24">
                    <div id="pcbl" class="chart-item-2" style="height:300px;"></div>
                </van-col>
            </van-row>
            <div class="divider" style="margin-bottom: 0"></div>
        </div>
        <div class="title-item">
            <span class="left">死亡病例趋势图</span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="24">
                    <div id="swbl" class="chart-item-2" style="height:300px;"></div>
                </van-col>
            </van-row>
            <div class="divider" style="margin-bottom: 0"></div>
        </div>
        <!-- 轨迹弹出框-->
        <van-image-preview v-model="show" :images="trackImg"  > </van-image-preview>
    </div>
</template>

<script>
import echarts from 'echarts'
import mapJson from '@/mock/data/210100_full.json'
import { Dialog } from 'vant'
import { definiteInfoList, qGNationwideList, lNNationwideList, sYNationwideList, mapInfoList, quxianyiqingxinxi, zxtsList } from '@/api/epidemic-surveillance'
export default {
  name: 'index',
  data () {
    return {
      quxianyiqingxinxi: [],
      definiteInfoList: [],
      mapJsonData: mapJson,
      countryItem: [],
      provinceItem: [],
      cityItem: [],
      show: false,
      trackImg: []
    }
  },
  methods: {
    toTracks (url) {
      if (url) {
        this.trackImg = [url]
        this.show = true
      } else {
        Dialog.alert({ message: '暂无轨迹' })
      }
    },
    timestampToTime (timestamp) {
      let date = new Date(timestamp)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
    },
    more () {
      this.$router.push({
        name: 'confirmed-personnel'
      })
    },
    traffic () {
      let myChart = echarts.init(document.getElementById('portExit'))
      // 指定图表的配置项和数据
      echarts.registerMap('HK', this.mapJsonData)
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>确诊：{c} '
        },
        visualMap: {
          min: 0,
          max: 10,
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name: '沈阳',
            type: 'map',
            mapType: 'HK',
            label: {
              show: true
            },
            data: [
              { name: '法库县', value: 1 },
              { name: '和平区', value: 0 },
              { name: '康平县', value: 0 },
              { name: '新民市', value: 1 },
              { name: '沈北新区', value: 1 },
              { name: '辽中区', value: 1 },
              { name: '苏家屯区', value: 2 },
              { name: '铁西区', value: 8 },
              { name: '于洪区', value: 1 },
              { name: '浑南区', value: 1 },
              { name: '皇姑区', value: 1 },
              { name: '大东区', value: 4 },
              { name: '沈河区', value: 6 }
            ],
            // 自定义名称映射
            nameMap: { }
          }]
      })
    },
    blqst (xData, totalData, addData) {
      let myChart = echarts.init(document.getElementById('blqst'))
      let option = {
        // title: {
        //   text: '确诊人员趋势图'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['累计', '新增'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '累计',
            type: 'line',
            data: totalData,
            color: '#8cd5c2', // 改变折线点的颜色
            lineStyle: {
              color: '#8cd5c2' // 改变折线颜色
            }
          },
          {
            name: '新增',
            type: 'line',
            color: '#d68a6f', // 改变折线点的颜色
            lineStyle: {
              color: '#d68a6f' // 改变折线颜色
            },
            data: addData
          }
        ]
      }
      myChart.setOption(option)
    },
    ysbl (xData, totalData, addData) {
      let myChart = echarts.init(document.getElementById('ysbl'))
      let option = {
        // title: {
        //   text: '确诊人员趋势图'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['累计', '新增'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '累计',
            type: 'line',
            color: '#8cd5c2', // 改变折线点的颜色
            lineStyle: {
              color: '#8cd5c2' // 改变折线颜色
            },
            data: totalData
          },
          {
            name: '新增',
            type: 'line',
            color: '#d68a6f', // 改变折线点的颜色
            lineStyle: {
              color: '#d68a6f' // 改变折线颜色
            },
            data: addData
          }
        ]
      }
      myChart.setOption(option)
    },
    zybl (xData, totalData, addData) {
      let myChart = echarts.init(document.getElementById('zybl'))
      let option = {
        // title: {
        //   text: '确诊人员趋势图'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['累计', '新增'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '累计',
            type: 'line',
            data: totalData,
            color: '#8cd5c2', // 改变折线点的颜色
            lineStyle: {
              color: '#8cd5c2' // 改变折线颜色
            }
          },
          {
            name: '新增',
            type: 'line',
            data: addData,
            color: '#d68a6f', // 改变折线点的颜色
            lineStyle: {
              color: '#d68a6f' // 改变折线颜色
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    pcbl (xData, totalData, addData) {
      let myChart = echarts.init(document.getElementById('pcbl'))
      let option = {
        // title: {
        //   text: '确诊人员趋势图'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['累计', '新增'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '累计',
            type: 'line',
            data: totalData,
            color: '#8cd5c2', // 改变折线点的颜色
            lineStyle: {
              color: '#8cd5c2' // 改变折线颜色
            }
          },
          {
            name: '新增',
            type: 'line',
            data: addData,
            color: '#d68a6f', // 改变折线点的颜色
            lineStyle: {
              color: '#d68a6f' // 改变折线颜色
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    swbl (xData, totalData, addData) {
      let myChart = echarts.init(document.getElementById('swbl'))
      let option = {
        // title: {
        //   text: '确诊人员趋势图'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['累计', '新增'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '累计',
            type: 'line',
            data: totalData,
            color: '#8cd5c2', // 改变折线点的颜色
            lineStyle: {
              color: '#8cd5c2' // 改变折线颜色
            }
          },
          {
            name: '新增',
            type: 'line',
            data: addData,
            color: '#d68a6f', // 改变折线点的颜色
            lineStyle: {
              color: '#d68a6f' // 改变折线颜色
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    init () {
      // 确诊人员信息
      definiteInfoList().then(({ data }) => {
        if (data.errcode === 0) {
          this.definiteInfoList = data.data
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      // 地图信息
      mapInfoList().then(ret => {
        if (ret.data.errcode === 0) {
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      // 区县疫情信息
      quxianyiqingxinxi().then(ret => {
        if (ret.data.errcode === 0) {
          this.quxianyiqingxinxi = ret.data.data
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      // 全国
      qGNationwideList().then(ret => {
        if (ret.data.errcode === 0) {
          this.countryItem = ret.data.data[0]
          this.countryItem.imp_date = this.timestampToTime(this.countryItem.imp_date)
          console.log(this.countryItem.imp_date)
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      // 全省
      lNNationwideList().then(ret => {
        if (ret.data.errcode === 0) {
          this.provinceItem = ret.data.data[0]
          this.provinceItem.imp_date = this.timestampToTime(this.provinceItem.imp_date)
          console.log(this.provinceItem.imp_date)
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
      // 全市
      sYNationwideList().then(ret => {
        if (ret.data.errcode === 0) {
          this.cityItem = ret.data.data[0]
          this.cityItem.imp_date = this.timestampToTime(this.cityItem.imp_date)
          console.log(this.cityItem.imp_date)
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })

      // 疫情趋势
      zxtsList().then(({ data }) => {
        if (data.errcode === 0) {
          let res = data.data
          let xData = []
          let totalData = { blqst: [], zybl: [], pcbl: [], swbl: [], ysbl: [] }
          let addData = { blqst: [], zybl: [], pcbl: [], swbl: [], ysbl: [] }
          res.forEach(item => {
            xData.push(item.md)
            totalData.blqst.push(item.comfirm_num)
            totalData.ysbl.push(item.suspect_num)
            totalData.swbl.push(item.death_num)
            totalData.zybl.push(item.cure_num)
            totalData.pcbl.push(item.exclude_num)
            addData.blqst.push(item.comfirm_num_last)
            addData.ysbl.push(item.suspect_num_last)
            addData.swbl.push(item.death_num_last)
            addData.zybl.push(item.cure_num_last)
            addData.pcbl.push(item.exclude_num_last)
          })
          this.blqst(xData, totalData.blqst, addData.blqst)
          this.swbl(xData, totalData.swbl, addData.swbl)
          this.ysbl(xData, totalData.ysbl, addData.ysbl)
          this.zybl(xData, totalData.zybl, addData.zybl)
          this.pcbl(xData, totalData.pcbl, addData.pcbl)
        } else {
          Dialog.alert({
            message: data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.traffic()
    this.init()
  }
}
</script>

<style scoped>
    .content{
        background-color: #efefef;
        height: auto;
    }
    .chart-item-1{
        width: 100%;
        height: 240px;
    }
    .chart-item{
        width: 100%;
        height: 300px;
    }
    .title-item{
        padding: 10px;
        font-size: 14px;
        color: #333333;
    }
    .title-item .left{
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }
    .title-item .right{
        float: right;
        color: gray;
        font-size: 12px;
    }
    .table-item{
        font-size: 10px;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #dddddd;
        border-top: 0;
    }
    .table-item:first-child{
        border-top: 1px solid #dddddd;
    }
    .table-item:nth-child(2n+1){
        background: #ffffff;
    }
    .table-div{
        padding: 0 10px;
    }
    .table-div .van-col{
        padding: 10px 0;
    }
    .content >>> .van-progress__pivot{
        background-color: initial !important;
        color: #ffffff;
    }
    /*.content >>> .van-progress{*/
    /*    background-color: #dddddd;*/
    /*}*/
    .van-tag{
        margin-right: 1px;
    }
    .content-item{
        padding: 0 10px;
    }
    .content-item .van-row{
        border: 1px solid #dddddd;
        border-radius: 5px;
        padding: 0 10px 10px 10px;
        font-size: 12px;
        background-color: #ffffff;
    }
    .content-item .time-item{
        font-size: 10px;
        text-align: right;
        padding: 10px 0 0 0;
    }
    .content-item>.van-row>.van-col.van-col--4>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--6>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--8>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--4{
        padding: 0 2px;
        width: 20%;
    }
    .content-item>.van-row>.van-col.van-col--6{
        padding: 0 2px;
    }
    .content-item>.van-row>.van-col.van-col--8{
        padding: 0 2px;
    }
    .num{
        font-size: 14px;
    }
    .title-name{
        background: #dddddd;
    }
    .add-item{
        font-size: 10px;
    }
    .color-oranged{
        color: orangered;
    }
    .color-orange{
        color: orange;
    }
    .color-green{
        color: rgb(40, 183, 163);
    }
    .color-gray{
        color: gray;
    }
    .color-blue{
        color: rgb(51, 102, 255);
    }
    .table-item .van-col.van-col--4{
        width: 20%;
        font-size: 12px;
    }
    .van-icon.van-icon-chart-trending-o{
        font-size: 14px;
    }
    .diagnosis{
        padding: 0 10px;
    }
    .diagnosis .diagnosis-item{
        padding: 0 2px;
    }
    .diagnosis .van-col.van-col--12 .diagnosis-boder{
        border: 1px solid #8b0000;
        border-top: 5px solid #8b0000;
        padding: 10px;
        font-size: 12px;
        margin-bottom: 5px;
        background-color: #ffffff;
    }
    .diagnosis .van-col.van-col--12 .diagnosis-boder span{
        font-weight: bold;
    }
    .pd{
        padding: 0 0 5px 0;
    }
    .van-row .pd:last-child{
        padding: 0;
    }
    .van-row .pd  .van-col{
        padding: 0;
    }
    .echart{
        background-color: #ffffff;
    }
    .divider{
        width: 100%;
        height: 5px;
        background-color: rgb(204, 204, 204);
        margin: 10px 0;
    }
    .van-button{
        font-size: 12px;
        padding: 5px;
        height: auto;
        line-height: initial;
        /*width: 100%;*/
    }
    .btn-item{
        border: 0 !important;
        padding: 0 10px !important;
    }
    .btn-item .van-col{
        text-align: center;
    }
    .demo-dialog img{
        box-sizing: border-box;
        width: 100%;
        padding: 25px 20px 0;
    }
    .chart-div {
        padding: 0 10px !important;
    }
    .chart-div .chart-item-2,.chart-div .chart-item-1,.chart-div .chart-item{
        background-color: #ffffff;
    }
</style>
